<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!-- <my-cpn></my-cpn> -->
            <cpn></cpn>
        </div>
        <div id="app2">
            <!-- <my-cpn></my-cpn> -->
            <cpn></cpn>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            //1. 创建组件构造器对象
            const cpnC = Vue.extend({
                template: `<div>
                    <h1>标题</h1>
                    <p>内容</p>
                </div>`
            })

            //2. 注册全局组件（意味着可以在多个vue实例中使用）
            Vue.component('my-cpn', cpnC)

            const app = new Vue({
                el: '#app',
                data: {

                },
                components: {
                    cpn: cpnC
                }
            })

            const app2 = new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>
</html>
